import cs from 'classnames'
import { useRouter } from 'next/router'
import { useContext, useEffect } from 'react'
import { useSelector } from 'react-redux'

import { GlobalContext } from '@/context'
import { GlobalState } from '@/store'
import checkLogin from '@/utils/checkLogin'

import EntityHeader from './LayoutEntityHeader/Index'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const { lang } = useContext(GlobalContext)
  const { token } = useSelector((state: GlobalState) => state)
  const router = useRouter()
  useEffect(() => {
    if (!checkLogin()) {
      router.replace('/entity')
    }
  }, [token])
  return (
    <div className={cs(lang === 'en-US' ? 'ltr' : 'rtl', 'w-full')}>
      <EntityHeader />
      <main className="w-full max-w-[1440px] min-w-[1024px] mx-auto">{children}</main>
    </div>
  )
}
